
import { Layout } from "antd";
import { Suspense, useState } from "react";
import { BsGrid3X3Gap, BsListUl, BsArrowLeft, BsArrowUp, BsCopy, BsScissors, BsTrash3, } from 'react-icons/bs';
import { create } from 'zustand'

import { useNavigate } from "react-router-dom";
import FileViewContent from "../components/files/FileViewContent";

const { Sider, Content, Header } = Layout;

// 这边还是得考虑用localstorage
// zustand
type Store = {
  viewType: "list" | "icon"
  setViewType: (viewType: "list" | "icon") => void
}

const useStore = create<Store>()((set) => ({
  viewType: "list",
  setViewType: (viewType: "list" | "icon") => set((state) => ({ viewType }))
}))

export default function FilePlan() {
  const { viewType, setViewType } = useStore()

  const navigate = useNavigate()

  return (
    <>
      <Header className="!bg-gray-100">
        <div
          className="flex w-full"
        >
          <div className="flex flex-1 justify-start">
            <div>
              <button title="返回" onClick={() => navigate(-1)}>
                <BsArrowLeft />
              </button>
            </div>
            <div>
              <button title="上级目录">
                <BsArrowUp />
              </button>
            </div>
          </div>
          <div className="flex flex-1">
            <div><button><BsCopy /></button></div>
            <div><button><BsScissors /></button></div>
            <div><button><BsTrash3 /></button></div>
          </div>
          <div className="flex-1 flex justify-end">
            <button onClick={() => setViewType(viewType == "list" ? "icon" : "list")}>
              {viewType === "list" ? <BsListUl /> : <BsGrid3X3Gap />}
            </button>
          </div>
        </div>

      </Header>
      <Content>
        <Suspense fallback={<div>Loading...</div>}>
          <FileViewContent viewType={viewType} />
        </Suspense>
      </Content>
    </>
  );
}
